<template>
    <div class="navigation-bar">
        <div class="logo-view">

        </div>
        <div class="nav-view">
            <el-menu :default-active="activeIndex" router>
                <div v-for="father in menus">
                    <el-sub-menu v-if="father.children.length > 0" :index="father.path">
                        <template #title>
                            <el-icon>
                                <component :is="father.icon" />
                            </el-icon>
                            <span>{{ father.name }}</span>
                        </template>
                        <el-menu-item v-for="child in father.children" :key="child.path" :index="child.path">
                            <el-icon>
                                <component :is="child.icon" />
                            </el-icon>
                            <span>{{ child.name }}</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item v-else :key="father.path" :index="father.path">
                            <el-icon>
                                <component :is="father.icon" />
                            </el-icon>
                            <span>{{ father.name }}</span>
                        </el-menu-item>
                </div>
            </el-menu>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/apis'

const menus = ref([])
const activeIndex = ref(null)

const initMenus = async () => {
    api.menus.getMenus().then(res => {
        let menuList = res.menus
        menuList = menuList.sort((a, b) => {
            return a.sort - b.sort
        })
        let fathers = menuList.filter(item => { return item.father == 0 })
        const childrens = menuList.filter(item => { return item.father != 0 })
        fathers.forEach(father => {
            father.children = []
            father.children = childrens.filter(item => { return item.father == father.id })
        })
        menus.value = fathers
        activeIndex.value = menus.value[0].path
    })
}

onMounted(() => {
    initMenus()
})
</script>

<style>
.navigation-bar {
    width: 100%;
    height: 100%;
    border-right: 1px dashed #eeeeee;
}

.logo-view {
    width: 100%;
    height: 60px;
    border-bottom: 1px dashed #eeeeee;
}

.nav-view {
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: auto;
}
</style>